{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Flasky{% endblock %}

{% block page_content %}




<h3> 扫描设备 </h3>
<br>

<div>
    <span class="alert alert-info" role="alert"> {{ lan }}</span>
    <button type="button" class="btn btn-info" id="flush" >扫描设备</button>
</div>



<table class="table table-bordered" id="table">
  <caption>在线设备</caption>
    <thead>
    <tr>
      <th>IP地址</th>
      <th>MAC地址</th>
      <th>开放端口</th>
         <th>操作</th>
    </tr>
  </thead>
  <tbody class="content">

</tbody>
</table>

<script type="text/javascript">
    $("#flush").on('click',function(){
        $.ajax({
            type: "POST",
            error:function (msg){},
            url:'scan_start',
            data: {"id":1},
            dataType:"json",
            success: function(msg){

                if(msg.status == 200){
                    $("#flush").text("重新扫描");

                    var $content = $(".content");

                    for( x in msg.rows){
                         var trElement =
                             "<tr>" +
                                "<td class='ip'>" + msg.rows[x][0] + "</td>" +
                                "<td class='mac'>" + msg.rows[x][1] + "</td>" +
                                "<td class='port'>" + msg.rows[x][2] + "</td>" +
                                "<td class='port'>" + '<button type="button" class="btn btn-default add">ADD</button>' + "</td>"+
                            "</tr>";

                         var $trElement = $(trElement);
                         $trElement.data("d", msg.rows[x]);

                         $content.append($trElement);
                    }
                }else{


                }
            }
        });
    });

    $(".content").on("click", ".add", function() {
        var $this = $(this);
        var data = $this.parent().parent().data("d");
        // 将数据返回给后台逻辑代码
        //[('d[]', u'192.168.0.10'), ('d[]', u'C0:3D:46:00:49:10'), ('d[]', u'22,80')]

        $.ajax({
            type: "POST",
            url: "store",
            dataType: "json",
            data: {
                ip:data[0],
                mac: data[1],
                port: data[2]
            },
            success: function(msg) {
                alert(msg);
            }
        });

        alert(JSON.stringify(data));
    });
</script>


{% endblock %}